<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>招商收益 - 共享米宝</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/custom.css">
</head>
<body class="bg-gray-100 text-gray-800">
    <div class="app-container max-w-md mx-auto bg-white min-h-screen relative pb-16">
        <!-- Header -->
        <header class="bg-white sticky top-0 z-10 shadow-sm">
            <div class="flex justify-between items-center p-4">
                <a href="earnings.html" class="text-gray-600">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 class="text-lg font-medium">招商收益</h1>
                <div class="w-5"></div> <!-- Placeholder for balance -->
            </div>
        </header>

        <!-- Main Content -->
        <main>
            <!-- Earnings Summary -->
            <div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-6">
                <div class="text-center mb-4">
                    <div class="text-sm opacity-80">本月招商收益</div>
                    <div class="text-3xl font-bold mt-1">¥235.60</div>
                </div>
                
                <div class="grid grid-cols-2 gap-4 mt-6">
                    <div class="text-center">
                        <div class="text-sm opacity-80">招募投资人</div>
                        <div class="text-xl font-medium mt-1">8人</div>
                    </div>
                    <div class="text-center">
                        <div class="text-sm opacity-80">分润比例</div>
                        <div class="text-xl font-medium mt-1">5%</div>
                    </div>
                </div>
            </div>

            <!-- Tab Selector -->
            <div class="bg-white border-b">
                <div class="flex">
                    <button id="tab-investors" class="flex-1 py-3 font-medium text-purple-500 border-b-2 border-purple-500">
                        招募的投资人
                    </button>
                    <button id="tab-details" class="flex-1 py-3 font-medium text-gray-500">
                        收益明细
                    </button>
                </div>
            </div>

            <!-- Recruited Investors (Tab 1) -->
            <div id="content-investors" class="bg-white">
                <!-- Investor List -->
                <div class="divide-y">
                    <!-- Investor 1 -->
                    <div class="p-4 border-b investor-item" data-investor="INV20230415">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <img class="h-12 w-12 rounded-full mr-3" src="https://via.placeholder.com/60" alt="投资人头像">
                                <div>
                                    <div class="font-medium">张志强</div>
                                    <div class="text-sm text-gray-500">投资设备: 5台</div>
                                    <div class="text-sm text-gray-500">ID: INV20230415</div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">¥128.10</div>
                                <div class="text-sm text-gray-500">本月收益</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Investor 2 -->
                    <div class="p-4 border-b investor-item" data-investor="INV20230402">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <img class="h-12 w-12 rounded-full mr-3" src="https://via.placeholder.com/60" alt="投资人头像">
                                <div>
                                    <div class="font-medium">李小红</div>
                                    <div class="text-sm text-gray-500">投资设备: 8台</div>
                                    <div class="text-sm text-gray-500">ID: INV20230402</div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">¥195.02</div>
                                <div class="text-sm text-gray-500">本月收益</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Investor 3 -->
                    <div class="p-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
                                    <i class="fas fa-user-tie text-gray-400"></i>
                                </div>
                                <div>
                                    <div class="font-medium">王大明</div>
                                    <div class="text-xs text-gray-500">注册时间: 2023-04-05</div>
                                    <div class="text-xs text-gray-500">设备数: 12台</div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">¥73.90</div>
                                <div class="text-xs text-gray-500">本月收益贡献</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Load More -->
                    <div class="p-4 text-center">
                        <button class="text-purple-500 text-sm font-medium">
                            查看更多
                        </button>
                    </div>
                </div>
            </div>

            <!-- Earnings Details (Tab 2) -->
            <div id="content-details" class="bg-white hidden">
                <div class="divide-y">
                    <!-- Transaction 1 -->
                    <div class="p-4 border-b earnings-record" data-investor="INV20230415">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center">
                                    <div class="bg-purple-100 p-1.5 rounded-md mr-3">
                                        <i class="fas fa-plus text-purple-500 text-xs"></i>
                                    </div>
                                    <div>
                                        <div class="font-medium">招商分润</div>
                                        <div class="text-xs text-gray-500 mt-1">投资人: 张志强 (INV20230415)</div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">+¥6.40</div>
                                <div class="text-xs text-gray-500 mt-1">2023-05-18 10:15</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 2 -->
                    <div class="p-4 border-b earnings-record" data-investor="INV20230402">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center">
                                    <div class="bg-purple-100 p-1.5 rounded-md mr-3">
                                        <i class="fas fa-plus text-purple-500 text-xs"></i>
                                    </div>
                                    <div>
                                        <div class="font-medium">招商分润</div>
                                        <div class="text-xs text-gray-500 mt-1">投资人: 李小红 (INV20230402)</div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">+¥9.75</div>
                                <div class="text-xs text-gray-500 mt-1">2023-05-18 09:42</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 3 -->
                    <div class="p-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center">
                                    <div class="bg-purple-100 p-1.5 rounded-md mr-3">
                                        <i class="fas fa-plus text-purple-500 text-xs"></i>
                                    </div>
                                    <div>
                                        <div class="font-medium">招商收益</div>
                                        <div class="text-xs text-gray-500 mt-1">来自: 王大明</div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">+¥7.40</div>
                                <div class="text-xs text-gray-500 mt-1">2023-05-18 11:05</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Load More -->
                    <div class="p-4 text-center">
                        <button class="text-purple-500 text-sm font-medium">
                            查看更多
                        </button>
                    </div>
                </div>
            </div>
        </main>

        <!-- Bottom Navigation -->
        <!-- <nav class="fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around items-center p-2 max-w-md mx-auto">
            <a href="index.html" class="text-center py-1 px-3">
                <i class="fas fa-home text-gray-400 text-xl"></i>
                <div class="text-xs mt-1 text-gray-500">首页</div>
            </a>
            <a href="#" class="text-center py-1 px-3">
                <i class="fas fa-bolt text-gray-400 text-xl"></i>
                <div class="text-xs mt-1 text-gray-500">租借</div>
            </a>
            <a href="#" class="text-center py-1 px-3">
                <i class="fas fa-map-marker-alt text-gray-400 text-xl"></i>
                <div class="text-xs mt-1 text-gray-500">附近</div>
            </a>
            <a href="earnings.html" class="text-center py-1 px-3">
                <i class="fas fa-chart-line text-purple-500 text-xl"></i>
                <div class="text-xs mt-1 text-purple-500">收益</div>
            </a>
            <a href="#" class="text-center py-1 px-3">
                <i class="fas fa-user text-gray-400 text-xl"></i>
                <div class="text-xs mt-1 text-gray-500">我的</div>
            </a>
        </nav> -->
    </div>

    <!-- Investor Detail Modal -->
    <div id="investor-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-lg p-6 m-4 max-w-md w-full">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium">投资人收益明细</h3>
                <button id="close-modal-btn" class="text-gray-500">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <!-- Investor Info -->
            <div class="flex items-center mb-4">
                <img id="investor-avatar" class="h-12 w-12 rounded-full mr-3" src="https://via.placeholder.com/60" alt="投资人头像">
                <div>
                    <div id="investor-name" class="font-medium">张志强</div>
                    <div id="investor-id" class="text-sm text-gray-500">ID: INV20230415</div>
                </div>
            </div>
            
            <!-- Earnings List -->
            <div class="divide-y max-h-80 overflow-y-auto" id="investor-earnings-list">
                <!-- Will be populated by JavaScript -->
            </div>
            
            <div class="mt-4 flex justify-end">
                <button id="close-detail-btn" class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript for Tabs -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Tab switching
            const tabInvestors = document.getElementById('tab-investors');
            const tabDetails = document.getElementById('tab-details');
            const contentInvestors = document.getElementById('content-investors');
            const contentDetails = document.getElementById('content-details');
            
            // Tab click handlers
            tabInvestors.addEventListener('click', function() {
                tabInvestors.classList.add('text-purple-500', 'border-b-2', 'border-purple-500');
                tabDetails.classList.remove('text-purple-500', 'border-b-2', 'border-purple-500');
                tabDetails.classList.add('text-gray-500');
                
                contentInvestors.classList.remove('hidden');
                contentDetails.classList.add('hidden');
            });
            
            tabDetails.addEventListener('click', function() {
                tabDetails.classList.add('text-purple-500', 'border-b-2', 'border-purple-500');
                tabInvestors.classList.remove('text-purple-500', 'border-b-2', 'border-purple-500');
                tabInvestors.classList.add('text-gray-500');
                
                contentDetails.classList.remove('hidden');
                contentInvestors.classList.add('hidden');
            });

            // Filter elements
            const timeButtons = document.querySelectorAll('.time-filter-btn');
            
            // Set active filter
            timeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // Remove active class from all buttons
                    timeButtons.forEach(btn => {
                        btn.classList.remove('bg-blue-500', 'text-white');
                    });
                    
                    // Add active class to clicked button
                    this.classList.add('bg-blue-500', 'text-white');
                });
            });
            
            // Investor items
            const investorItems = document.querySelectorAll('.investor-item');
            const investorDetailModal = document.getElementById('investor-detail-modal');
            const closeModalBtn = document.getElementById('close-modal-btn');
            const closeDetailBtn = document.getElementById('close-detail-btn');
            const investorAvatar = document.getElementById('investor-avatar');
            const investorName = document.getElementById('investor-name');
            const investorId = document.getElementById('investor-id');
            const investorEarningsList = document.getElementById('investor-earnings-list');
            
            // Investor click events
            investorItems.forEach(item => {
                item.addEventListener('click', function() {
                    const investorId = this.getAttribute('data-investor');
                    const investorNameText = this.querySelector('.font-medium').textContent;
                    
                    showInvestorDetail(investorId, investorNameText);
                });
            });
            
            // Show investor detail
            function showInvestorDetail(id, name) {
                // Update modal content
                investorName.textContent = name;
                investorId.textContent = 'ID: ' + id;
                
                // Get earnings records for this investor
                const earningsRecords = document.querySelectorAll('.earnings-record[data-investor="' + id + '"]');
                
                // Clear previous records
                investorEarningsList.innerHTML = '';
                
                // Clone and add records to modal
                earningsRecords.forEach(record => {
                    const clone = record.cloneNode(true);
                    investorEarningsList.appendChild(clone);
                });
                
                // Show modal
                investorDetailModal.classList.remove('hidden');
            }
            
            // Close modal
            function closeModal() {
                investorDetailModal.classList.add('hidden');
            }
            
            closeModalBtn.addEventListener('click', closeModal);
            closeDetailBtn.addEventListener('click', closeModal);
        });
    </script>
</body>
</html> 